<template>
	<div>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				基础信息
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">销售单号：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">签订日期：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">订单类型：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">签订地点：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">订单描述：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">合同总价：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入（小写）"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">交货时间：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">合同总价：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">付款条件：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">交货地点：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">技术要求：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">产品铸字标识：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">产品表面处理要求：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">产品包装要求：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">备注：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">客户公司名称：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">所属销售：</span>
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="10">
					<div class="main-color v-flex v-col-top">
						<span class="w-[150px] text-right">付款节点：</span>
						<div>
							<el-button class="w-[90px] h-[36px]" color="#0054A6" type="primary"
								@click="addNode">添加节点</el-button>
							<div class="v-flex mt-[20px]" v-for="(item,index) in Data" :key="index">
								<div class="v-flex">
									<span>节点名称:</span>
									<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
								</div>
								<div class="v-flex ml-[20px] mr-[20px]">
									<span>节点金额比:</span>
									<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
								</div>
								<el-icon @click="deleteNode(index)">
									<RemoveFilled />
								</el-icon>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				其他条款
			</div>
			<el-row class="mt-[20px]">
				<el-col :span="13">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">其他条款：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<div class=" font-bold main-color pl-[80px] text-left mt-[20px]">买方</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">公司：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">地址：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入（小写）"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">委托人：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">电话：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入（小写）"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">传真：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">开户行：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入（小写）"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">账户：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
			<div class=" font-bold main-color pl-[80px] text-left mt-[20px]">卖方</div>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">公司：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">地址：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入（小写）"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">委托人：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">电话：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入（小写）"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">传真：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="6" class="ml-[62px]">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">开户行：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入（小写）"></el-input>
					</div>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[150px] text-right">账户：</span>
						<el-input class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				合同附件
			</div>
			<div class="mt-[20px] v-flex v-col-top main-color">
				<span class="w-[150px] text-right">合同文件：</span>
				<el-upload v-model:file-list="fileList" class="upload-demo"
					action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange" :limit="1">
					<el-button>上传文件</el-button>
					<template #tip>
						<div class="el-upload__tip">
							支持扩展名：docx、pdf、jpg
						</div>
					</template>
				</el-upload>
			</div>
			<div class="mt-[20px]  main-color v-flex v-col-top">
				<span class="w-[150px] text-right">附件信息：</span>
				<div>
					<el-upload v-model:file-list="fileList" class="upload-demo"
						action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-change="handleChange" :limit="1">
						<el-button>上传文件</el-button>
						<template #tip>
							<div class="el-upload__tip">
								支持扩展名：docx、pdf、jpg
							</div>
						</template>
					</el-upload>
					<el-button class="w-[100px]  h-[36px] mt-[20px]" color="#0054A6" type="primary">
						<span>+附件</span>
					</el-button>
				</div>
			</div>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				选择产品
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品名称" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>产品名称</span>
					</template>
				</el-table-column>
				<el-table-column label="图号" prop="超级好吃的巧克力" align="center"  />
				<el-table-column label="材质" prop="上海AAAA有限公司" align="center" />
				<el-table-column label="件数" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="预计单重(kg/件)" prop="王小明" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="预计总重(kg/件)" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>预计总重(kg/件)</span>
					</template>
				</el-table-column>
				<el-table-column label="公斤价（元/kg）" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="单价" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="合计" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>预计总重(kg/件)</span>
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" >
					<template #default="{row}">
						<el-input placeholder="请输入"></el-input>
					</template>
				</el-table-column>
				<el-table-column label="供应商" align="center" >
					<template #default="{row}">
						<el-select placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
			</el-table>
			<el-button type="primary" plain class="mt-[10px] h-[48px]" style="width: 100%;" @click="addGoods">
				<el-icon><CirclePlus /></el-icon>
				<span>添加产品</span>
			</el-button>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >预览</el-button>
			<el-button class="main-color1 w-[100px] h-[36px]" >取消</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">提交</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	import type { UploadProps , UploadUserFile} from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
	
		return true
	}
	const fileList = ref<UploadUserFile[]>([
	  {
	    name: 'food.jpeg',
	    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
	  }
	])
	const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
	  fileList.value = fileList.value.slice(-3)
	}
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		},
	])
	const Data = ref([])
	// 添加节点
	const addNode = (fullPath : any) => {
		Data.value.push({ name: 1 })
	}
	// 删除节点
	const deleteNode = (index : any) => {
		console.log(index)
		if(index == 0){
			Data.value = Data.value.slice(0,0);
		}else{
			Data.value = Data.value.splice(index, 1);
		}

	}
	// 监听节点数据
	watch(Data, () => {
		console.log(Data.value);
	}, {
		deep: true
	})
	const lists = ref<Array<any>>([
		{},
	])
	// 添加产品
	const addGoods = () => {
		lists.value.push({})
	}
</script>

<style>
</style>